<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 09:30:55
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.contract-manage.relative.h100
  div.container.overflow-y
    EnterpriseCenterTitle(:titleList="titleList")
    div.no-contract(v-if="guaranteeInfo.review_status == 2 && guaranteeInfo.sign_status == 0")
      div.title 您有一份合同待签订
      div.content
        div.quota.f3 您的担保请求已通过，可担保金额为 {{ guaranteeInfo.estimate_money }}元
        div.status.f4  
          div.mb2 审核状态：通过
          div.mb2 提交时间：{{ guaranteeInfo.submit_time }}
          div 审核时间：{{ guaranteeInfo.review_time }}
        div.input-quota.flex
          span.f4 您可修改担保金额为：
          el-input.w-input(v-model="guaranteeMoney" placeholder="请输入" clearable)
          span.ml1.f4 元
        div.tip.f4 不能超过担保公司提供的担保金
      div.btn.flex.justify-center
        el-button(type="primary" @click="onSignContract") 签署合同
    div.table.mt4.px4(v-else)
      el-table(
        :data="tableData" 
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
        empty-text="暂无数据"
        border 
        style="width: 100%")
        el-table-column(prop="id" label="合同ID" width="74")
        el-table-column(prop="no" label="合同编号" width="167")
        el-table-column(prop="company" label="企业名称" width="150")
        el-table-column(prop="guarantor" label="担保公司" width="150")
        el-table-column(prop="contract_duration" label="合同周期(天)" width="112")
        el-table-column(prop="guarantee_duration" label="担保周期(天)" width="112")
        el-table-column(prop="actual_money" label="担保额度(元)" width="112")
        el-table-column(prop="available_money" label="可用额度(元)" width="112")
        el-table-column(prop="sign_status" label="是否签订" width="88")
        el-table-column(prop="start_time" label="生效时间" width="118")
        el-table-column(prop="end_time" label="到期时间" width="118")
        el-table-column(prop="createtime" label="创建时间" width="118")
        el-table-column(fixed="right" label="操作" width="88")
          template(v-slot="scope" #default)
            el-button(link type="primary" size="small" @click="onPerformanceRecord(scope.row)") 履约记录
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
  //- 履约记录
  el-dialog(
    v-model="performanceRecordVisible"
    width="1045"
    align-center
    :show-close="true"
    :destroy-on-close="true"
    center)
    PerformanceRecord(:rowId="rowId")
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import EnterpriseCenterTitle from "@/components/EnterpriseCenterTitle.vue";
import PerformanceRecord from "@/views/end/contract-manage/components/PerformanceRecord.vue";
import TablePagination from "@/components/TablePagination.vue";
import contractApi from "@/api/contract";
import { useRouter } from "vue-router";
const router = useRouter();

const { proxy } = getCurrentInstance();
const titleList = ref([
  {
    name: "合同管理",
    value: "",
  },
]);
const isGuarantee = ref(false); // 是否担保
const guaranteeMoney = ref(); // 担保金额
const guaranteeInfo = ref({
  estimate_money: "",
  review_status_text: "",
  review_status: "",
  review_reason: "",
  review_time: "",
  submit_time: "",
  signer: "",
  sign_status: "",
  company_sign_time: "",
  guarantor_sign_time: "",
  platform_sign_time: "",
  fdd_auth: "",
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([
  // {
  //   id: "34",
  //   no: "2023090112333344",
  //   company: "杭州美好有限公司",
  //   guarantor: "杭州信誉担保公司",
  //   contract_duration: "365",
  //   guarantee_duration: "120",
  //   actual_money: "300000",
  //   available_money: "29000",
  //   sign_status: "否",
  //   start_time: "2023-09-01 12:12:12",
  //   end_time: "2023-09-01 12:12:12",
  //   createtime: "2023-09-01 12:12:12",
  // },
]);
const rowId = ref("");
const performanceRecordVisible = ref(false);

// 生命周期
onMounted(() => {
  getGuaranteeInfo();
  getGuaranteeList();
});

//合同分页
const form=ref({
  page: 1,
  page_size: 10,
})

// 合同列表
const getGuaranteeList = () => {
  contractApi.guaranteeIndex(form.value).then((res) => {
    tableData.value = res.data.data;
    totalList.value = res.data.total;
  });
};

// 获取担保审核签署信息
const getGuaranteeInfo = () => {
  contractApi.guaranteeInfo().then((res) => {
    if (res.code == 2) {
      isGuarantee.value = true;
    } else {
      guaranteeInfo.value = res.data;
    }
  });
};

// 履约记录
const onPerformanceRecord = (row) => {
  console.log("履约记录", row.id);
  rowId.value = row.id;
  performanceRecordVisible.value = true;
};

// 签署合同
const onSignContract = () => {
  contractApi
    .guaranteeSign({
      money: guaranteeMoney.value
        ? guaranteeMoney.value
        : guaranteeInfo.value.estimate_money,
    })
    .then((res) => {
      if (res.code == 1) {
        window.open(res.data.url);
      }
    });
};

//数据总条数
const totalList = ref(0);

//分页
const handleCurrentChange = (val) => {
  form.value.page = val;
  getGuaranteeList()
};
</script>

<style lang="stylus" scoped>
.contract-manage
  .container {
    height: calc(100vh - 204px);
  }
  .no-contract
    padding: 22px 26px;
  .title
    margin-bottom: 22px;
    font-weight: bold;
    font-size: 20px;
  .content
    padding: 16px 12px;
    border: 1px solid #E6E6E6;
    .quota
      margin-bottom: 16px;
      font-weight: bold;
      color: #18BC9F;
    .status
      padding: 16px;
      background: #F5F5F5;
    .tip
      color: #E84026;
    .input-quota
      margin: 16px 0px;
    .w-input
      width: 220px;
  .btn
    margin-top: 16px;
</style>
  